<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    table,table tr th, table tr td {
        border:1px solid black;
        text-align: center;
    }
    ul li{
        list-style: none;
        float: left;
    }
    .pro-img{
        width: 45px;
        height: 60px;
    }
    #table-div table{
        margin: auto;
    }
    #select-div{
        /*border: 1px solid red;*/
        width: 655px;
        margin: auto;
        margin-bottom: 10px;
        margin-top: 20px;
    }
    .pagination-div{
        margin:auto;
        width: 300px;
    }
    .pagination-div ul li{
        border: 1px solid red;
        margin-left: 5px;
    }
    .pagination-div span{
        border: 1px solid red;
    }
    .selected-li{
        background: #3ee0e5;
    }
    .pagination-div ul li:hover{
        cursor:pointer;
    }
</style>
<body>
<div id="vue-div">
    <div id="select-div">
        名称：<input v-model="product.proName">
        价格：<input v-model="product.minPrice">~<input v-model="product.maxPrice">
        <button @click="search">查询</button>
    </div>
    <div id="table-div">
        <table>
            <tr>
                <th>产品编码</th>
                <th>产品信息</th>
                <th>类型Id</th>
                <th>价格</th>
                <th>上市时间</th>
                <th>详细信息</th>
                <th>版本</th>
                <th>颜色</th>
                <th>图片</th>
            </tr>
            <tr v-for="list in lists.resultList">
                <td>
                    {{list.productId}}
                </td>
                <td>
                    {{list.proName}}
                </td>
                <td>
                    {{list.typeId}}
                </td>
                <td>
                    {{list.proPrice}}
                </td>
                <td>
                    {{list.date}}
                </td>
                <td>
                    {{list.show}}
                </td>
                <td>
                    {{list.version}}
                </td>
                <td>
                    {{list.color}}
                </td>
                <td>
                    <img v-bind:src=list.image class="pro-img">
                </td>
            </tr>
        </table>
    </div>
    <!--分页-->
    <div class="pagination-div">
        <ul>
            <li @click="search">首页</li>
            <li></li>
            <li @click="toPage(this.product,lists.pageNow - 1)" v-if="lists.pageNow>1">{{lists.pageNow - 1}}</li>
            <li class="selected-li">{{lists.pageNow}}</li>
            <li @click="toPage(this.product,lists.pageNow + 1)" v-if="lists.pageNow<lists.totalPage">{{lists.pageNow + 1}}</li>
            <li @Click="toPage(this.product,lists.totalPage)">尾页</li>
        </ul>
    </div>
</div>
</body>
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/vue.js"></script>
<script>
    $(function (){
        let lists = selPro({},1);
        console.log(lists);
        new Vue({
            el: "#vue-div",
            data: {
                lists: lists,  //表格展示的对象 包含分页参数
                product:{}  //存储查询条件的对象
            },
            methods: { // 跳转页面函数
                search:function () {//条件查询
                    this.lists = selPro(this.product,1);
                },
                toPage:function(product,page){//分页查询
                    this.lists = selPro(this.product,page)
                }
            }
        })
    })
    //查询产品信息
    function selPro(obj,pageNow){

        let list;
        obj.pageNow=pageNow;

        $.ajax({
            type:"post",
            url:"/productController/selProduct",
            data:obj,
            dataType:"json",
            async:false,
            success:function(selProduct){
                list = selProduct;
            }
        })
        return list;
    }
</script>
</html>